<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>document</title>
    <style>
        h1{
            text-align: center;
        }
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            display: flex;
            justify-content: center;
            position: fixed;
            bottom: 0;
            /* top: 0; */
            width: 100%;
            font-size: 0;
            align-items: center;
        }
        .wrap img{
            transition-property:left, bottom;
            transition-duration:3s;
            transition-timing-function: ease;
            display: block;
            width: 64px;
            margin: 0 20px;
            flex-basis: 64px 64px;
            flex-shrink:0;
            position: relative;
        }
    </style>
</head>
<body>
    <h1>仿苹果电脑底部菜单+鼠标悬停菜单运动</h1>
    <div style="height:2000px;"></div>
    <div class="wrap">
        <img src="images/picpng1.png" alt="">
        <img src="images/picpng2.png" alt="">
        <img src="images/picpng3.png" alt="">
        <img src="images/picpng4.png" alt="">
        <img src="images/picpng5.png" alt="">
    </div>
    <script>
        var imgArr = document.getElementsByClassName('wrap')[0].getElementsByTagName('img');
        var imgArrLen = imgArr.length;
        window.onload = function(){            
            var r = 200;
            document.onmousemove = function(e){
                /* 
                imgArr[i].getBoundingClientRect().left
                    方法返回元素的大小及其相对于视口的位置。--------------  https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect                  
                imgArr[i].offsetWidth
                    返回一个元素的布局宽度.--------------https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetWidth
                e.clientX
                    鼠标指针在点击元素（DOM）中的X坐标。--------------https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent
                 */
                for(let i = 0; i < imgArrLen; i ++){
                    var a = imgArr[i].getBoundingClientRect().left + imgArr[i].offsetWidth/2 - e.clientX;                   
                    var b = imgArr[i].getBoundingClientRect().top + imgArr[i].offsetHeight/2 - e.clientY;
                    var c = Math.sqrt(a*a + b*b);
                    if( c >= r){
                        imgArr[i].style.width = '64px';
                    }else{
                        imgArr[i].style.width = (164 - c*0.5) > 128 ? 128 : 164 - c*0.5 + 'px';
                    }
                }
            }
        }

        

        //目标  div 随机移动，鼠标移动 div 停止,鼠标不动3秒钟，div随机移动
        //1：img移动动画（位置变化）
        //  position relative
        //  img.style.left = xxx;   img.style.right = xxx;
        //  确定一个随机点，div在一定时间内往这个随机点移动，
        // 解决  让元素向某个点移动 
                //1 : 随机出现一个元素点，（在浏览器视角中），  得出该点对于视口的位置getBoundingClientRect()  减去 img对于视口的位置
                //2：写一个定时器  为 3秒钟，
                //3：img.style.left = xxx; img.style.right = xxx; 让其移动。
        //  随机数 Math.random();0-1之间
        //2：div鼠标移动事件
            // onmousemove  使得 img位置都固定为 left 0 ;top:0;
        //3: 判断鼠标不动三秒钟事件（new date)
            //var timer;
            // document.addEventListener('mousemove',function(){               
            // clearInterval(timer);
            // timer = setInterval(function(){
            // console.log('aaa');
            //     },3000);
            // });
        
        (function(){
            // function findPoint(){
            // var seeWidth = document.documentElement.clientWidth;
            // var seeHeight = document.documentElement.clientHeight;
            // var obj = {
            //     x :parseInt(Math.random()*seeWidth),
            //     y :parseInt(Math.random()*seeHeight)
            // };
            // return obj;                  
            // }
            for(let i = 0; i < imgArrLen; i ++){
                imgArr[i].style.right = '0px';
                imgArr[i].style.bottom = '0px';
                var righta = imgArr[i].getBoundingClientRect().left;
                var lefta = imgArr[i].getBoundingClientRect().right;
                var bottomb = imgArr[i].getBoundingClientRect().top;              
                let timer;
                document.addEventListener('mousemove',function(){ 
                    imgArr[i].style.left = '0px';
                    imgArr[i].style.bottom = '0px';
                    //鼠标停止3秒发生事情的的思想
                    clearInterval(timer);
                    timer = setInterval(function(){
                        // let ranpoint = findPoint();
                        // let moveRight = ranpoint.x - a - parseInt(imgArr[i].style.width);
                        // let moveBottom = ranpoint.y - b - parseInt(imgArr[i].offsetHeight);
                        // imgArr[i].style.left = moveRight + 'px';
                        // console.log('right' + moveRight);
                        // imgArr[i].style.top =  moveBottom + 'px';
                        // console.log('bottom' +  moveBottom);
                        // console.log(i); 

                        imgArr[i].style.left = parseInt((Math.random()-0.5)*2*800)+'px';
                        imgArr[i].style.bottom = parseInt(Math.random()*700)+'px';
                        
                    },3000);
                });
            }
        }())
        
    </script>
</body>
</html>